/*
 * 分类页面视图
 * @Author: ljb
 * @Date: 2018-03-27 17:52:07
 * @Last Modified by: ljb
 * @Last Modified time: 2019-01-29 18:20:52
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
    .v-customer-product-category-views {
		padding: 20px;
		.category-tabpane {
			min-height: 74vh;
		}
    }
</style>

<template>

	<div class="v-customer-product-category-views">

		<Tabs
			v-model="tag_name"
			type="card"
		>

			<TabPane
				label="查看"
				class="category-tabpane"
				name="查看">

				<!-- 搜索组件 -->
				<search-form @search="confirmSearch"/>

				<category-index
					:loading="table_loading"
					:categories="categories.data"
					@edit="getCategoryDetail"
				/>

				<br>
				<!-- 分页组件 -->
				<Row
					type="flex"
					justify="center">
					<Page
						:total="categories.total"
						:current="categories.current_page"
						:page-size="query_info.per_page"
						placement="top"
						show-sizer
						show-total
						@on-change="pageChange"
						@on-page-size-change="perPageChange"/>
				</Row>

			</TabPane>
		</Tabs>

		<Modal
			v-model="show_modal"
			:title="$t('classification.update_classify')"
			class-name="vertical-middle-modal">

			<!-- 素材编辑组件 -->
			<category-edit
				:category-detail="category_detail"
				@update="updateCategory"/>

			<div slot="footer"/>

		</Modal>

	</div>

</template>

<script>

import API_LIST from 'src/API_LIST';

import { mapMutations } from 'vuex';

import qs from 'qs';

import categoryIndex from './index';
import categoryEdit from './edit';
import searchForm from './search-form';

export default {

	name: 'ProductCategoryViews',

	components: {
		categoryIndex,

		categoryEdit,

		searchForm,
	},
	data() {
		return {

			query_info: {
				page: 1,

				per_page: 20,

				is_show: '',
			},
			search_info: {
				page: 1,

				per_page: 20,
			}, // 分页信息

			tag_name: '查看',

			table_loading: false, // 表格更新时的loading

			show_modal: false, // 弹框的控制

			category_detail: {}, // 产品详情

			categories: {}, // 分类信息


		};
	},

	mounted() {
		this.fetchCategoryList(this.query_info);
	},

	methods: {

		...mapMutations('spinShow', [
			'showSpin',
			'closeSpin',
		]),


		/**
     * 页码改变
     * @param  {string} pageNumber {当前页码}
     * @return {undefined}
     */
		pageChange(pageNumber) {
			this.search_info.page = pageNumber;

			this.search_info.per_page = this.query_info.per_page;

			this.fetchCategoryList(this.search_info);
		},

		/**
     * 每页显示数改变
     * @param  {string} per_page {当前每页显示数}
     * @return {undefined}
     */
		perPageChange(per_page) {
			this.search_info.per_page = per_page;

			this.query_info.per_page = per_page;

			this.fetchCategoryList(this.query_info);
		},

		/**
         * 查看分类详情
         * @param  {Object} detail {详情对象}
         * @return {undefined}
         */
		getCategoryDetail(detail) {
			this.category_detail = detail;

			this.show_modal = true;
		},

		/**
     * 更新分类信息
		 * @param {String} id {分类id}
     * @param  {Object} param {需要更新的参数对象}
     * @return {undefined}
     */
		updateCategory(id, param) {
			this.showSpin();

			this.$http.post(`${API_LIST.CUST_CATEGORY}/${id}`, param)

				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					this.$Message.success(this.$t('common.update_success'));

					this.show_modal = false;

					this.fetchCategoryList(this.search_info);
				})

				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})

				.then(this.closeSpin);
		},


		/**
     * 获取产品分类列表
     * @param  {Object} param {搜索列表的参数}
     * @return {undefined}
     */
		fetchCategoryList(param) {
			this.table_loading = true;

			const query_str = qs.stringify(param);

			this.$http.get(`${API_LIST.CUST_CATEGORY}?${query_str}`)

				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					this.categories = data.categories;
				})

				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})

				.then(() => { this.table_loading = false; });
		},

		/**
     * 确认搜索
     * @param  {Object} param {搜索的参数对象}
     * @return {undefined}
     */
		confirmSearch({ is_show }) {
			this.query_info.is_show = is_show || '';

			this.search_info = JSON.parse(JSON.stringify(this.query_info));

			this.fetchCategoryList(this.query_info);
		},

	},
};
</script>
